Back

单页应用 push => 打包构建 => 发布 => 接oss => 自动刷新cdn => 消息通知

September 09, 2020

假设没有持续集成，我们一般开发是这个样子的，本地打包构建好后，自己拖到 nginx，或者 上传到 oss上去，这里有个问题是每个人本地环境都是不一样的，很容易出现问题，甚至有的人本地打包还一直不成功，质量也不好把控，成了个玄学问题，接下来就用 vue 的单页项目(用 react 一样 都是一个思路)做个例子，大家一起学习 基于 gitlab ci 的持续集成例子

首先，我在gitlab 上创建的 一个单页项目，也可以通过上面的 fe-cli 来通过模版创建

项目地址如下： https://gitlab.com/gitbookdemo/vue-signle-page

我们主要关注 .gitlab-ci.yml

image: node:latest

# variables 是定义环境变量，可以在直接获取
variables:
  TEST_PROJECT_NAME: "hucheng"
# stages 定义 执行步骤，包含了需要执行的job，类似第一步干嘛，第二步干嘛，接着干嘛
stages:
  - install_deps
  - build
  - deploy

# install_deps 就是job，job下面的 stage 字段和上面一一对应起来
install_deps:
  stage: install_deps
  only:             #  这里的 only 标记 在下面3个分支下面，push代码后，执行当前job，，only 支持 branch，tag，change，正则
    - develop
    - preview
    - master
  script:  # script 就是你要执行的脚本了
    -  echo $TEST_PROJECT_NAME && npm install

build:
  stage: build
  only: 
    - develop
    - preview
    - master
  artifacts: # artifacts 标记，当前job 执行完成后，在 gitalb 网页可以下载的文件，会出现个下载按钮，可以下载这个目录
    paths:
      - ./dist
  script: 
    - npm run build

deploy:
  stage: deploy
  only: 
    - develop
    - preview
    - master
  script: 
    - echo '开始上传到 oss'
    # 这里是发布相关的脚本，建议通过这种远程获取的方式，做到热更新,如果放在当前项目目录每个改动起来不方便 https://gitlab.com/gitbookdemo/fe-script
    - curl https://gitlab.com//api/v4/projects/18688576/repository/files/deploy.js/raw?ref=master | node  "$type" dist

之前的打包构建已经说过，这里我们关注最下面的  deploy  这个脚本主要是 把 dist 目录上传到 阿里云oss，这样我们就完成了个最小闭环

这里需要强调的是 ，我把 deploy.js 通过 api 的方式获取，这样的好处就是，我们可以动态的更改 发布的逻辑，还记得我之前讲的 soucemap 那块么，这样某天需要处理soucemap 我们就可以添加一处，所有的项目就生效了 代码 push 后 我们可以去 gitlab 上看看 https://gitlab.com/gitbookdemo/vue-signle-page/pipelines

image.png

image.png

这样我们整个流程就处理完毕，完成了 push => 打包构建 => 发布 => 接oss => 自动刷新cdn => 消息通知 一条龙服务，大大减少了工作量